<template>
	<div>
		<search-model ref="searchModel" class="searchModel" style="text-align: center;left: -500px;" title="查询商品编码">
			<div style="text-align: left;">
				<div style="display: inline-block;">
					<span class="search-select-title">商品品牌</span>
					<select class="search-select" v-model="selected1">
						<option v-for="(option,index) in optionGoodsCode1" :key="index" :value="option.id">{{option.name}}</option>
					</select>
				</div>
				<div style="display: inline-block;">
					<span class="search-select-title">一级运营分类</span>
					<select class="search-select" v-model="selected2">
						<option v-for="(option,index) in optionGoodsCode2" :key="index" :value="option.goodsclassid">{{option.goodsclassname}}</option>
					</select>
				</div>
				<div style="display: inline-block;">
					<span class="search-select-title">二级运营分类</span>
					<select class="search-select" v-model="selected3">
						<option v-for="(option,index) in optionGoodsCode3" :key="index" :value="option.goodsclassid">{{option.goodsclassname}}</option>
					</select>
				</div>
			</div>
			<div style="text-align: left;">
				<select v-model="statusencode" class="encodemyselect">
					<option value="0">商品名称</option>
					<option value="1">商品编码</option>
				</select>
				<input type="text" v-model="encodedata" style="display: inline-block;width: 40%;" />
				<search-button text="搜索" :clickEvent="searchbuttonEvent" style="display: inline-block;text-align: center;"></search-button>
			</div>
			<table class="sv-table">
				<tr class="table-th">
					<th>商品名称</th>
					<th>商品编码</th>
					<th>条码</th>
					<th>价格(元)</th>
					<th>商品分类</th>
				</tr>
				<tr class="table-tr" v-for="(item, index) in getDataArray" :key="index" @click="getgoodscode(item)">
					<td>{{item.goodsName}}</td>
					<td>{{item.goodsCode}}</td>
					<td>{{item.barCode}}</td>
					<td>{{item.normalprice}}</td>
					<td>{{item.goodsClassName}}</td>
				</tr>
			</table>
			<mo-paging v-if="dataArray" :page-index="currentPage" :total="Arraycount" :page-size="pageSize" @change="pageChange">
			</mo-paging>
			<!--<gray-button text="取消" :clickEvent="hideModel" class="cancelBtn"></gray-button>-->
		</search-model>
		<m-toast ref="toast"></m-toast>
	</div>
</template>

<script>
	import SearchButton from "../SearchButton";
	import SearchModel from "../EditModel";
	import GrayButton from "../GrayButton";
	import pagination from "../pagination";
	import Toast from "../Toast";
	import getData from './getData';
	import brandsCode from './BrandsCode';
	import getCode from './getGoodsCode';
	export default {
		data() {
			return {
				goodscode: "",
				dataArray: [],
				statusencode: 0,
				encodedata: "",
				/*商品品牌*/
				selected1: "",
				optionGoodsCode1: [],
				/*一级运营分类*/
				selected2: "",
				optionGoodsCode2: [],
				/*二级运营分类*/
				selected3: "",
				optionGoodsCode3: [],
				//分页
				pageSize: 3, //每页显示20条数据
				currentPage: 1, //当前页码
				count: 0, //总记录数
			}
		},
		components: {
			"search-button": SearchButton,
			"search-model": SearchModel,
			"gray-button": GrayButton,
			"mo-paging": pagination,
			"m-toast": Toast,
		},
		computed: {
			getDataArray() {
				return this.dataArray;
			},
			Arraycount() {
				return this.count;
			}
		},
		watch: {
			selected2(data) {
				if(data) {
					this.getGoodsCodedata(2, data)
				}
			},
		},
		methods: {
			showCover() {
				this.$refs.searchModel.showCover();
			},
			hideModel() {
				this.dataArray = [];
				this.statusencode = 0;
				this.encodedata = "";
				this.selected1 = "";
				this.selected2 = "";
				this.selected3 = "";
				this.count = 0;
				this.$refs.searchModel.hideCover();
			},
			//获取商品品牌
			getBrandsCode() {
				let params = {
					enterpriseid: api.enterpriseid,
				}
				let callback = (data) => {
					if(data) {
						for(let i = 0; i < data.length; i++) {
							let obj = {};
							obj.name = data[i].brandname;
							obj.id = data[i].brandid;
							this.optionGoodsCode1.push(obj);
						}
					}
				}
				brandsCode(callback, params);
			},
			//获取分类数据
			getGoodsCodedata(level, parentId) {
				let params = {
					enterpriseid: api.enterpriseid,
					level: level,
					parentId: parentId
				}
				let callback = (data) => {
					if(data && !parentId) {
						this.optionGoodsCode2 = data
					} else if(data && parentId) {
						this.optionGoodsCode3 = data
					}
				}
				getCode(callback, params);
			},
			//搜索
			searchbuttonEvent() {
				let params = {
					length: this.pageSize,
					pageNum: this.currentPage,
					start: (this.currentPage - 1) * this.pageSize,
					goodscode: "", //商品编码
					goodsname: "", //商品名称
					opcode: "", //拼音码
					status: 2,
					goodsClassCode: this.selected2, //一级运营分类
					goodsClassChildCode: this.selected3, //二级运营分类
					brandid: this.selected1, //商品品牌
				}
				if(this.statusencode == 0) {
					params.goodsname = this.encodedata;
				} else if(this.statusencode == 1) {
					params.goodscode = this.encodedata;
				}
				let callback = (data) => {
					this.dataArray = data.results;
					this.count = data.totalCount
					if(this.dataArray.length == 0) {
						this.$refs.toast.toast("暂无推广类型的商品数据");
					}
				}
				getData(callback, params);
			},
			pageChange(page) {
				this.currentPage = page
				this.searchbuttonEvent()
			},
			getgoodscode(item) {
				this.goodscode = item.goodsCode
				this.$emit('getgoodscodedata', this.goodscode)
				this.$refs.searchModel.hideCover();
			},
		},

		created() {

		},
		mounted() {
			this.getBrandsCode();
			this.getGoodsCodedata(1);
		},
	}
</script>

<style>
	.searchModel {
		position: absolute;
		z-index: 1;
		width: 600px;
	}
	
	.searchModel .cancelBtn {
		display: inline-block;
		margin-top: 10px;
	}
	
	.encodemyselect {
		display: inline-block;
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 15%;
		height: unset;
		margin-bottom: 20px;
	}
	
	.search-select-title {
		text-align: left;
		font-size: 0.7rem;
	}
	
	.search-select {
		display: inline-block;
		border: 1px solid #ddd;
		padding: 5px 5px;
		width: 80px;
		height: unset;
		margin: 0px 10px 5px 5px;
	}
</style>